<template>
  <el-tabs v-model="params.type" @tab-click="handleClick">
    <el-tab-pane label="文字區塊" name="text"> </el-tab-pane>
    <el-tab-pane label="圖文組合區塊" name="news"> </el-tab-pane>
  </el-tabs>
  <el-scrollbar class="scroll">
    <el-space wrap :size="10">
      <el-input
        v-model="params.material_name"
        style="width: 150px"
        placeholder="素材名称"
      />
      <el-input
        v-model="params.content"
        style="width: 150px"
        placeholder="内容"
      />
      <el-button :icon="Search" plain @click="search">查詢</el-button>
    </el-space>
    <div class="tab mt-1">
      <div v-for="(item, index) in tableData" class="m-1" :style="{width: fit.width}">
        <material-temp
          :info="item"
          @selectFn="selectItme(item)"
          :class="{ m_active: item.isActive }"
        ></material-temp>
      </div>
    </div>
  </el-scrollbar>
  <div class="mt-2 flex flex-wrap justify-center">
    <el-pagination
      v-model:current-page="params.current_page"
      v-model:page-size="params.page_size"
      :small="false"
      :disabled="false"
      :background="true"
      :pager-count="fit.pagerCount"
      layout="prev, pager, next"
      :total="Number(total)"
      class="mb-1"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import { $getMaterial } from "@api/common";
import { Search, Setting, Plus } from "@element-plus/icons-vue";
import { useCommonStore } from "@/store/common";
import { useLocaleStore } from "@/store/locales";
const useLocale = useLocaleStore();
const useCommon = useCommonStore();
let fit = reactive({
  width: '45%',
  pagerCount:7
});
if (useLocale.isMob) {
  fit.width = '100%';
  fit.pagerCount=5;
} else {
  fit.width = '45%';
  fit.pagerCount=7;
}

onMounted(() => {
  getData();
});

const handleClick = (tab: TabsPaneContext, event: Event) => {
  getData();
};

let params = ref({
  current_page: 1,
  page_size: 10,
  type: "text",
  material_name: "",
  content:""
});
const total = ref(0);
const myDate = ref([]);
const tableData = ref([]);
onMounted(() => {
  getData();
});
const getData = async () => {
  let res = await $getMaterial(params.value);
  console.log(res);
  res.data.table.forEach((ele) => {
    Reflect.set(ele, "isActive", false);
  });
  if (res.code == 0) {
    tableData.value = res.data.table;
    total.value = res.data.total;
  }
};
const handleSizeChange = (val: number) => {
  params.value.page_size = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  params.value.current_page = val;
  getData();
  console.log(`current page: ${val}`);
};
const selectItme = (item) => {
   useCommon.setmSelected(item);
   tableData.value.forEach((ele) => {
    if(item.m_id==ele.m_id){
      ele.isActive=true;
    }else{
      ele.isActive=false;
    }
  });

};
const search = () => {
  console.log(params.value);
  getData();
};

const dialogVisible = ref(false);
</script>
<style>
.m_active {
  .isVisible {
    visibility: visible !important;
  }
}
</style>
<style lang="scss" scoped>
.tab {
  display: flex;
  justify-content: space-between;
   flex-wrap: wrap;
}
.scroll {
  height: calc(100vh - 350px);
}
</style>
